<script lang="ts" setup>
import { useViewer } from '../../stores/viewer';
import { createBoolRef } from './sceenConfig';
const viewer: any = useViewer().viewer;
const settingOptions = viewer.zz._settingOptions;

const homeButton = createBoolRef('homeButton', settingOptions);
const infoBox = createBoolRef('infoBox', settingOptions);
const vrButton = createBoolRef('vrButton', settingOptions);
const fullscreenButton = createBoolRef('fullscreenButton', settingOptions);
const navigationHelpButton = createBoolRef('navigationHelpButton', settingOptions);
const sceneModePicker = createBoolRef('sceneModePicker', settingOptions);
const contextmenu = createBoolRef('contextmenu', settingOptions);
const legend = createBoolRef('legend', settingOptions);
const compass = createBoolRef('compass', settingOptions);
const fps = createBoolRef('fps', settingOptions);
const location = createBoolRef('location', settingOptions);
const timeline = createBoolRef('timeline', settingOptions);
</script>

<template>
  <table class="zz-scene-table">
    <tr>
      <td class="first-col">回到起始视口</td>
      <td class="secode-col">
        <el-switch v-model="homeButton" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">属性窗口</td>
      <td class="secode-col">
        <el-switch v-model="infoBox" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">VR按钮</td>
      <td class="secode-col">
        <el-switch v-model="vrButton" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">全屏按钮</td>
      <td class="secode-col">
        <el-switch v-model="fullscreenButton" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">操作提示</td>
      <td class="secode-col">
        <el-switch v-model="navigationHelpButton" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">场景模式切换</td>
      <td class="secode-col">
        <el-switch v-model="sceneModePicker" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">右键菜单</td>
      <td class="secode-col">
        <el-switch v-model="contextmenu" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">比例尺</td>
      <td class="secode-col">
        <el-switch v-model="legend" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">罗盘</td>
      <td class="secode-col">
        <el-switch v-model="compass" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">fps</td>
      <td class="secode-col">
        <el-switch v-model="fps" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">相机方位</td>
      <td class="secode-col">
        <el-switch v-model="location" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">时间轴</td>
      <td class="secode-col">
        <el-switch v-model="timeline" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
  </table>
</template>

<style>
@import './sceneConfig.css';
</style>
